<%--
  Created by IntelliJ IDEA.
  User: zhangjie
  Date: 2018/9/18
  Time: 2:53 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>失智随访更多</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <%--<link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css">--%>
    <link rel="stylesheet" href="${assets}/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/bloodScreening.css">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <script src="${assets}/js/views/vue.min.js"></script>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="${assets}/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="${assets}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <style>
        .color {
            margin: 0 !important;
        }

        span {
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            font-family: PingFang-SC-Regular;
        }

        .btn {
            float: right;
            width: 100px;
            font-size: 16px;
            line-height: 28px;
            background: #35acfd !important;
            margin-right: 15px !important;
            padding: 0 !important;
        }

        .infor div span {
            color: #666;

        }

        .infor .other span {
            width: 40.7%;
            margin-right: 5.36%;
        }

        #example_paginate {
            margin-top: 15px;
            width: 100%;
            text-align: center;
        }

        #mytool {
            width: 96%;
        }

        .none {
            display: none
        }

        label {
            height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }

        .tableWrap span {
            height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #666666;
        }

        #accompanyType {
            width: 160px;
            height: 30px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            line-height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #999999;
        }

        #beginDate, #endDate {
            width: 120px;
            height: 30px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            font-family: PingFang-SC-Regular;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #999999;
        }

        input[type=checkbox] {
            width: 20px;
            height: 20px;
            -webkit-appearance: none;
            border-radius: 5px;
            border: 1px solid #9e9e9e;
            vertical-align: top;
            margin-top: 7px;
        }

        input[type=checkbox]:checked {
            background-image: url('${assets}/images/radio.png');
            background-size: 100% 100%;
            border: none
        }

        .content {
            height: auto !important;
        }

        .dataTables_empty {
            line-height: 30px;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div id="main" class="wrap">
    <div>
        <%--    病人基本信息模块开始--%>
        <div style="padding-bottom:20px;background-color: #ffffff;box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);">
            <div style="margin-left:19px;">
                <div class="first_news">
                    <div class="news" style="margin-top:15px;margin-bottom:16px;">
                        <h3>病人基本信息</h3>
                        <button type="button" class="btn btn-info" @click="updateInfo()" >
                            <img src="${assets}/images/revise.png" alt="" style="width:16px;vertical-align: middle;">  修改
                        </button>
                        <%--                    <button :disabled="dis" id="btnText" v-if="synchronous" type="button" class="btn btn-info" @click="Synchronous($event)">{{btnText}}</button>--%>
                    </div>
                    <div style="display: flex;">
                        <div class="img" style="width:12%;">
                            <img src="${assets}/images/img1.png" alt="头像">
                        </div>
                        <div class="infor" style="width:80%;margin-left:2%;">
                            <div>
                                <span style="width:17%;">姓名: &nbsp;{{infor.realname}}</span>
                                <span style="width:15%;">性别: &nbsp;{{infor.sex}}</span>
                                <span style="width:15%;">年龄: &nbsp;{{infor.age}}</span>
                                <span style="width:22%;">出生日期: &nbsp;{{infor.birthday}}</span>
                                <span>身份证号: &nbsp;{{infor.idcard}}</span>
                            </div>
                            <div>
                                <span style="width:17%;">身高: &nbsp;{{infor.height}}cm</span>
                                <span style="width:15%;">体重: &nbsp;{{infor.weight}}kg</span>
                                <span style="width:15%;">BMI: &nbsp;{{infor.bMI}}</span>
                                <span style="width:22%;">腰围: &nbsp;{{infor.waist}}cm</span>
                                <span style="width:24%;">联系电话: &nbsp;{{infor.phone}}</span>
                            </div>
                            <div class="other">
                                <span style="width:30%;margin-right:0;vertical-align:middle">地址: &nbsp;{{infor.homeaddress}}</span>
                                <span style="width:33%;margin-right:0;vertical-align:middle">现患疾病诊断信息: &nbsp;{{infor.diseaseDiagnosis}}</span>
                                <span class="type" style="width:20%;margin-left:5%;vertical-align:middle;">
                                <p :title="infor.diseasesType" style="overflow: hidden;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;">疾病类型: &nbsp;{{infor.diseaseName}}</p>
                            </span>
                            </div>
                            <div class="type" style="margin-top:13px;">
                                <b style="margin-right:5%;font-weight: 100;">建档医生: &nbsp;{{infor.doctor}}</b>
                                <b style="font-weight: 100;margin-right:5%;">建档机构: &nbsp;{{infor.hospName}}</b>
                                <b style="font-weight: 100;">备注: &nbsp;{{infor.remark}}<br/></b>
                                <b style="font-weight: 100;" id="bgRemark"></b>
                                <b style="font-weight: 100;" id="bpRemark"></b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%--    病人基本信息模块结束--%>
    </div>
    <div style="width:100%;">
        <div class="illness">
            <div class="tableWrap">
                <div style="margin-left:20px;padding-top:20px;">
                    <h3 style="margin-bottom:16px;">MMSE记录</h3>
                </div>
                <div style="margin-top:20px;margin-left:35px;" class="table">
                    <label for="id_select" class="illtype" style="margin-right:20px;">随访方式</label>
                    <select id="accompanyType" name="accompanyType" class="SN">
                        <medi:configOpt name="accompanyType" />
                    </select>
                    <label for="time" class="illtype" style="margin-left:29px;margin-right:20px;">时间</label>
                    <div style="width:120px;display:inline-block;vertical-align:middle;margin-bottom:5px;">
                        <div id="PrevTime" class="input-group date form_date" style="width: 100%"
                             data-date-format="yyyy-mm-dd">
                            <input id="beginDate" type="text" class="lay-date" placeholder="  开始日期" readonly>
                        </div>
                    </div>
                    -
                    <div style="width:120px;display:inline-block;vertical-align:middle;margin-bottom:5px;">
                        <div id="PrevTime" class="input-group date form_date" style="width: 100%"
                             data-date-format="yyyy-mm-dd" style="width:120px;display:inline-block">
                            <input id="endDate" type="text" class="lay-date" placeholder="  截止日期" readonly>
                        </div>
                    </div>
                    <button onclick="search();" class="btn"
                            style="float:none;color:white;margin-bottom:5px;margin-left:30px;">
                        <img src="${assets}/images/search.png" alt="" style="width:16px;vertical-align: middle;"> 搜索
                    </button>
                </div>
                <div class="content" style="padding-bottom:40px;">
                    <div id="tablepart">
                        <table id="example" class="display" cellspacing="10" width="100%">
                            <thead>
                            <tr style="background:#e6e6e6;">
                                <th></th>
<%--                                <th>随访医生</th>--%>
                                <th>随访日期</th>
                                <th>随访方式</th>
<%--                                <th>随访有无药物</th>--%>
<%--                                <th>随访月份</th>--%>
<%--                                <th>下次随访日期</th>--%>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="loading" style="display: none;">
                    <img src="${newframe }/images/slidebar/loading.gif" class="loadingImg">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  var vm = new Vue({
    el: "#main",
    data: {
      infor: [],//病人基本信息data
      id: '',
      idcard: '',
      BMI: '',
      age: '',
      ispatient: '',
      highBp: '',
      isObesity: '',
      familyHistory: '',
      isHighSalt: '',
      isExcessive: '',
      isGreater: '',
      type: '',
      synchronous: false,
      btnText: '',
      dis: false
    },
    methods: {
      getPersonalInfo(){
        let that = this;
        // 获取病人信息
        $.ajax({
          url: "${URL_PATIENT_PATIENTINFO}",
          type: 'post',
          dataType: "json",
          data: {
            idCard: that.idcard
          },
          success: function (data) {
            if(data.success){
              that.infor = data.data;
            }
          }
        })
      },
      // 修改病人基本信息
      updateInfo: function () {
        let that = this;
        var add = location.search.split('?')[1].split('&')
        var type = location.search.split('?')[1].split('&')[add.length - 1].split('=')[1];

        window.parent.showNewModelIframe("${ctx}/pppatientbase/new/update?id=" + that.infor.id + '&diseasesType=' + type + '&type=' + that.Type, 800, 650);
      },
      // 获取地址里的参数
      getParams(name){
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      },
      // 当前日期
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      // 初始化表格
      initTable(idcard) {
        var that = this;
        var url = '${ctx}/lose/wisdom/follow/up/list?idCard=' + idcard;
        table = $('#example').DataTable({
          "dom": "<'row'<'#mytool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<''i><''p>>",
          "bFilter": false,//去掉搜索框
          "bAutoWidth": true, //自适应宽度
          "info": false,
          "bSort": false,
          "sPaginationType": "full_numbers",
          "ordering": false,//是否允许Datatables开启排序
          "bProcessing": true,
          "bServerSide": true,
          "searching": false, //去掉搜索框方法一
          'lengthChange': false,
          "oPaginate": false,
          "sAjaxSource": url,
          "sAjaxDataProp": "dataList",//查询后，返回的集合
          "fnServerData": function (sSource, aoData, fnCallback) {
            aoData.push(
              {
                'name': 'beginAnswerTime',
                'value': $('#beginDate').val()
              },
              {
                'name': 'endAnswerTime',
                'value': $('#endDate').val()
              },
              {
                'name': 'followUpWay',
                // followUpWay
                'value': $('#accompanyType option:selected')[0].value
              }
            ),
              $.ajax({
                "dataType": 'json',
                "url": sSource,
                "type": 'post',
                "data": aoData,
                "success": function (resp) {
                  console.log(resp)
                  fnCallback(resp)
                }
              });
          },
          "aoColumns": [{
            "targets": 0,
            "data": null,
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
              $(nTd).html(
                ''
                + '&nbsp;&nbsp;<input name="id" id = "' + oData.id + '" value="'
                + oData.id
                + '" type="checkbox"><label for=' + oData.id + '></label>'
                + '');
            }
          },{
            "targets": 1,
            "data": null,
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
              if (oData.answerTime != null) {
                $(nTd).html(oData.answerTime.slice(0, 10))
              } else {
                $(nTd).html('')
              }
            }
          }, {
            "targets": 2,
            "data": null,
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
              if (oData.followUpWay == '1') {
                $(nTd).text('门诊')
              } else if (oData.followUpWay == '2') {
                $(nTd).text('家庭')
              } else if (oData.followUpWay == '3') {
                $(nTd).text('电话')
              } else if (oData.followUpWay == '4') {
                $(nTd).text('集体')
              } else {
                $(nTd).text('')
              }
            }
          }],
          "oLanguage": {//插件的汉化
            "sLengthMenu": "32",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "oPaginate": {
              "sFirst": "",
              "sPrevious": "<b>上一页<b>",
              "sLast": "",
              "sNext": "<i>下一页</i>"

            },
            "sZeroRecords": "没有检索到数据",
            "sProcessing": "<img src='' />",
            "sSearch": "搜索"
          },
          "initComplete": function () {
            <shiro:hasPermission name="instrument:delete">
            $("#mytool")
              .append(
                '<button id="delete_butt" type="button" onclick="deleteInstr()" style="float:right">删除</button>');
            </shiro:hasPermission>
            <shiro:hasPermission name="instrument:update">
            $("#mytool")
              .append(
                '<button id="update_butt" type="button" onclick="updateInstr(this)" style="float:right">修改</button>');
            </shiro:hasPermission>
            <%--        <shiro:hasPermission name="instrument:add">--%>
            <%--        $("#mytool")--%>
            <%--          .append(--%>
            <%--            '<button id="add_butt" type="button" onclick="addNoMedical()" style="float:right">新增无药物随访</button>');--%>
            <%--        </shiro:hasPermission>--%>
            <shiro:hasPermission name="instrument:add">
            $("#mytool")
              .append(
                '<button id="add_butt" type="button" onclick="addVisitedRecord()" style="float:right">新增</button>');
            </shiro:hasPermission>
          }
        });
      },

      // 初始化日期
      initLayDate(id) {
        laydate({
          elem: id,
          istime: true,
          format: 'YYYY-MM-DD',
          choose: function (dates) { //选择好日期的回调
            // initTablePatient();
          }
        })
      }
    },
    mounted() {
      this.idcard = this.getParams("idCard");

      this.getPersonalInfo(this.idcard);
      this. initTable(this.idcard);
      this.initLayDate('#beginDate');
      this.initLayDate('#endDate')

    }
  })
  // 新增随访记录
  function addVisitedRecord(){
    var href = location.search.split('?')[1];
    var idCard = href.split('&')[0].split('=')[1]
    console.log(idCard)
    $.ajax({
      url:"${URL_SCREENING_GETBREADLINE}",
      dataType:'json',
      type:'post',
      success:function(data){
        breadLine = JSON.parse(data.data)
        var url = '${ctx}/lose/wisdom/follow/up/index?idCard=' + idCard + '&change=' + '0'
        breadLine.push({
          name:'失智随访详情',
          href:url
        });
        $.ajax({
          url:'${URL_SCREENING_SAVEBREADLINE}',
          data:{
            breadLine:JSON.stringify(breadLine)
          },
          dataType:'json',
          type:'post',
          success:function(data){
            parent.showSrc('${ctx}/lose/wisdom/follow/up/index?idCard=' + idCard + '&id=' + '')
            <%--parent.showSrc('${ctx}/lose/wisdom/patient/records/index?idCard=' + name + '&diseasesType=' + diseasesType + '&type=' + Type)--%>
          }
        })
      }
    })
  }

  function search() {
    refreshTable()
  }
  // 修改随访记录
  function updateInstr(obj) {
    var checkedArray = getCheckedArray();
    // debugger
    if (checkedArray.length != 1) {
      var str = '请勾选一条数据修改'
      window.parent.showNewModelIframe('${URL_COMMON_TOTIPS}?title=' + encodeURI(encodeURI(str)), 380, 220)
      return;
    } else {
      var href = location.search.split('?')[1];
      var idCard = href.split('&')[0].split('=')[1]
      console.log(idCard)
      $.ajax({
        url: "${URL_SCREENING_GETBREADLINE}",
        dataType: 'json',
        type: 'post',
        success: function (data) {
          breadLine = JSON.parse(data.data)
          var url = '${ctx}/lose/wisdom/follow/up/index?idCard=' + idCard + '&id=' + checkedArray
          breadLine.push({
            name: '随访详情',
            href: url
          })
          $.ajax({
            url: '${URL_SCREENING_SAVEBREADLINE}',
            data: {
              breadLine: JSON.stringify(breadLine)
            },
            dataType: 'json',
            type: 'post',
            success: function (data) {
              parent.showSrc('${ctx}/lose/wisdom/follow/up/index?idCard=' + idCard + '&id=' + checkedArray)
            }
          })
        }
      })
    }
  }

  function deleteInstr() {
    var checkedArray = getCheckedArray();
    console.log(checkedArray)
    var ids = "";
    if (checkedArray.length == 0) {
      var str = '请勾选一条数据修改'
      window.parent.showNewModelIframe('${URL_COMMON_TOTIPS}?title=' + encodeURI(encodeURI(str)), 380, 220);
      return
    } else if(checkedArray.length > 1){
      var str = '最多只能删除一条记录'
      window.parent.showNewModelIframe('${URL_COMMON_TOTIPS}?title=' + encodeURI(encodeURI(str)), 380, 220)
      return
    }else {
      for (var i = 0; i < checkedArray.length; i++) {
        ids += checkedArray[i] + ",";
      }
      ids = ids.substring(0, ids.length - 1);
    }
    var r = confirm("确定要删除勾选的数据吗?");
    if (r == true) {
      $.ajax({
        url: '${ctx}/lose/wisdom/follow/up/delete',//删除地址
        dataType: 'json',
        type: 'post',
        data: {
          id: ids
        },
        async: false, //默认为true 异步
        error: function () {
          alert('error');
        },
        success: function (data) {
          if (data.code != 0) {
            alert("刪除失敗，失敗原因：" + data.msg);
          }
          refreshTable();
        }
      });
    }
  }

  function getCheckedArray() {
    var checkedArray = [];
    $("input[name='id']").each(function () {
      if (this.checked) {
        checkedArray.push(this.value);
      }
    });
    return checkedArray;
  }
</script>
</body>
</html>
